<template>
  <div>
    <Bread1 :breadtitle="breadtitle"></Bread1>

    <!-- 添加按钮 -->
    <a-button type="primary"> 添加角色 </a-button>

    <!-- 表单 -->
    <a-table
      :columns="columns"
      rowKey="id"
      :data-source="$store.getters.roleList1"
    >
      <span slot="action" slot-scope="text, record, index">
        <a-row type="flex">
          <a-col :span="8" :order="1"
            ><a-button type="primary" icon="tool"> 编辑 </a-button></a-col
          >
          <a-col :span="8" :order="2">
            <a-button
              type="primary"
              icon="apartment"
              @click="showModal(record, index)"
            >
              分配
            </a-button>
          </a-col>
          <a-col :span="8" :order="3">
            <a-button type="danger" icon="delete"> 删除 </a-button>
          </a-col>
        </a-row>
      </span>
      <!-- 展开 -->
      <p slot="expandedRowRender" slot-scope="record, index">
        <a-row
          :class="['bd', i1 === 0 ? 'bp' : '', 'duiqi']"
          v-for="(item1, i1) in roleList[index].children"
          :key="item1.id"
        >
          <a-col :span="5">
            <a-tag
              style="margin: 7px"
              closable
              @close="closeTag(record, item1.id)"
            >
              {{ item1.authName }}
            </a-tag>
            <a-icon type="caret-right" />
          </a-col>
          <a-col :span="19">
            <a-row
              :class="['bd', 'duiqi', i1 === 0 ? 'bp' : '']"
              v-for="(item2, i2) in item1.children"
              :key="item2.id"
            >
              <a-col :span="6"
                ><a-tag
                  style="margin: 7px"
                  closable
                  @close="closeTag(record, item2.id)"
                >
                  {{ item2.authName }}
                </a-tag>
                <a-icon type="caret-right"
              /></a-col>
              <a-col :span="18">
                <a-tag
                  style="margin: 7px"
                  v-for="(item3, i3) in item2.children"
                  :key="item3.id"
                  closable
                  @close="closeTag(record, item3.id)"
                  >{{ item3.authName }}
                </a-tag>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </p>
    </a-table>

    <!-- 分配权限 -->
    <a-modal
      v-model="visible"
      title="分配权限"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-tree
        v-model="checkedKeys"
        checkable
        :tree-data="rigthList"
        :defaultCheckedKeys="defKeys"
        autoExpandParent
        :checkStrictly="true"
        :replaceFields="fields"
      ></a-tree>
    </a-modal>
  </div>
</template>
<script>
import Bread1 from "@/components/bread/Bread1";
import { mapState } from "vuex";
import { columns } from "@/utils/roletablecolumns";

export default {
  data() {
    return {
      breadtitle: ["权限管理", "角色列表"],
      columns,
      //分配权限弹出框
      visible: false,
      //默认勾选的复选框
      defKeys: [],
      fields: {
        //  key: "id",
        children: "children",
        title: "authName",
        key: "id",
      },
      //选中的
      checkedKeys: [],
      // 所存的id
      roleInd: "",
    };
  },
  components: { Bread1 },
  computed: {
    ...mapState({
      roleList: (state) => state.power.roleList || [],
      delthen: (state) => state.power.delthen || [],
      rigthList: (state) => state.power.rigthList || [],
    }),
  },
  mounted() {
    this.getRoleList();
  },
  methods: {
    // 网络请求
    getRoleList() {
      this.$store.dispatch("getRole");
    },
    //删除按钮
     async closeTag(role, id) {
      try {
        await this.$store.dispatch("getDelRole", {
          id: role.id,
          rightld: id,
        });
        this.$message.success("删除权限成功！");
        role.children = this.delthen;
        console.log(this.delthen);
      } catch (error) {
        this.$message.warning("删除权限失败！");
      }
    },
    //分配权限弹打开
    showModal(record, index) {
      this.roleInd = record.id;
      // console.log(record.id);
      // 派发网络请求
      this.$store.dispatch("getDis");
      // 递归获取三级节点id
      this.getLeafKeys(this.roleList[index], this.defKeys);
      this.visible = true;
    },
    //分配权限弹确定关闭
    async handleOk(e) {
      const idStr = this.checkedKeys.checked.join(",");
      const {roleInd}=this
      try {
        await this.$store.dispatch('checkRole',{roleInd,idStr})
        this.visible = false;
        this.$message.success("添加权限成功！");
      } catch (error) {
        this.$message.warning("添加权限失败！");
      }
      this.defKeys = [];
      this.visible = false;
    },
    //分配权限取消或者关闭
    handleCancel(e) {
      this.defKeys = [];
      this.visible = false;
    },
    //获取已选三级菜单
    getLeafKeys(node, arr) {
      if (!node.children) {
        return arr.push(node.id);
      }
      node.children.forEach((item) => {
        this.getLeafKeys(item, arr);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.bd {
  border-bottom: 1px solid #eee;
}
.bp {
  border-top: 1px snow #eee;
}
.duiqi {
  display: flex;
  align-items: center;
}
</style>
